<template>
  <view class="convert">
    <view class="convert-wrap" v-if="userStore.userInfo?.babyId != -1">
      <image class="convert-img" v-if="userStore.userInfo?.avator" :src="userStore.userInfo?.avator"
        mode="aspectFill" />
      <view v-else>
        <image class="convert-img" v-if="userStore.userInfo?.babySex == 0" src="/static/tabs/girl.png" mode="" />
        <image class="convert-img" v-else src="/static/tabs/boy.png" mode="" />
      </view>
      <view class="convert-inner">
        <view class="name">{{ userStore.userInfo?.indexTitle ? userStore.userInfo?.indexTitle : 'Hello，宝宝家长' }}
        </view>
        <view class="text">{{ userStore.userInfo?.indexSubTitle ? userStore.userInfo?.indexSubTitle : '欢迎来到东方爱婴儿童成长中心～'
          }}</view>
      </view>
    </view>
    <view v-for="(item, index) in Coursedata" :key="index">
      <view class="convert-content">
        <image class="convert-content-banner" v-if="!item.coverImg" src="/static/tabs/banner.png" mode="" />
        <image class="convert-content-banner" v-else :src="item.coverImg" mode="" />
      </view>
      <view class="convert-btn" @click="gocode(item, item.id)" v-if="userStore.userInfo?.babyId != -1">{{
      item.buttonName ? item.buttonName : '进入学习' }}</view>
      <!-- <view class="convert-btn" @click="gocode(item, item.id)">{{ item.orderStatus == 0 ? '兑换码兑换' : '进入学习' }}</view> -->
    </view>
    <view class="convert-qr" @click="maskflag = true">
      咨询老师
    </view>
    <view class="convert-mask" v-if="maskflag" @click="maskflag = false">
      <image src="/static/tabs/qrcode.png" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { login, bigCourselist } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const Coursedata = ref()
const maskflag = ref(false)
onLoad(async () => {
})
const getlogin = () => {
  wx.login({
    async success(res) {
      if (res.code) {
        //发起网络请求
        let logdata: any = await login({ code: res.code, courseGroup: 'monthAge' })
        if (logdata.code == 0) {
          console.log(logdata, 'logdata');
          const result = { ...logdata.data }
          userStore.setUserInfo(result)
          if (logdata.data.babyId == -1) {
            uni.navigateTo({
              url: '/pages/infos/index'
            })
          } else {
            getbigCourse()
          }
        }
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })
}
onShow(() => {
  if (!userStore.userInfo?.token) {
    getlogin()
  } else {
    if (userStore.userInfo?.babyId == -1) {
      uni.navigateTo({
        url: '/pages/infos/index'
      })
    } else {
      getbigCourse()
    }
  }
  // uni.navigateTo({
  //   url: '/pages/infos/index'
  // })
})
const getbigCourse = async () => {
  let res: any = await bigCourselist()
  if (res.code == 0) {
    Coursedata.value = res.data
  } else if (res.code == -2000) {
    userStore.userInfo = {}
    getlogin()
  }
}
const gocode = (item: any, id: any) => {
  if (userStore.userInfo?.babyId == -1) {
    uni.showModal({
      // title: '提示',
      content: '添加宝宝信息，才可以兑换学习课程哦~',
      confirmText: '去添加',
      success: function (res) {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/infos/index'
          })
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
  } else {
    if (item.orderStatus == 0) {
      uni.navigateTo({
        url: `/pages/redeemCode/index?coverImg=${item.coverImg}&title=${item.title}&id=${item.id}`
      })
    } else if (item.orderStatus == 1) {
      uni.navigateTo({
        url: `/pages/home/index?id=${id}`
      })
    } else {
      uni.showToast({
        title: '您的课程已到期，请与我们联系',
        duration: 2000,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #F8F8F8;
}

.convert {
  padding: 18rpx 34rpx 0rpx 34rpx;

  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .77);

    image {
      width: 396rpx;
      height: 448rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &-qr {
    text-align: center;
    width: 148rpx;
    height: 62rpx;
    line-height: 62rpx;
    position: fixed;
    right: 0rpx;
    bottom: 206rpx;
    border-radius: 31rpx 0 0 31rpx;
    color: #fff;
    background: #EE7651;
    font-size: 26rpx;
  }

  &-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 34rpx;
  }

  &-content {
    width: 100%;

    &-banner {
      width: 100%;
      border-radius: 16rpx;
    }
  }

  &-btn {
    margin: 0 auto;
    margin-top: 34rpx;
    margin-bottom: 88rpx;
    width: 636rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #068FEB;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  &-img {
    width: 96rpx;
    height: 96rpx;
    margin-right: 14px;
    border-radius: 50%;
  }

  &-inner {
    .name {
      font-weight: 600;
      font-size: 36rpx;
      color: #2F2F2F;
    }

    .text {
      font-size: 26rpx;
      color: #2F2F2F;
    }
  }
}
</style>